<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>支付相关</title>
	<link rel="stylesheet" href="css/swiper.min.css" />
	<link rel="stylesheet" href="css/animate.css" />
	<link rel="stylesheet" type="text/css" href="css/font.css">
	<link rel="stylesheet" type="text/css" href="css/madieer.css">
	<script type="text/javascript" src="js/w_rem.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script><!-- 建站通2.0需引入 jquery -->
	<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script><!-- 建站通2.0需引入 vue3 -->
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
	<script type="text/javascript" src="js/wow.js"></script>
	<script type="text/javascript" src="js/jzt_common.js"></script><!-- 建站通2.0公共js -->
	<script type="text/javascript" src="js/madieer.js"></script>
	<style>
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 200px;
		}

		.btn-box .btn {
			padding: 0 15px;
			height: 42px;
			line-height: 42px;
			color: #fff;
			background-color: rgba(0, 172, 132, 1);
			text-align: center;
			margin: 10px;
			cursor: pointer;
		}

		.btn-box .btn.ali {
			background-color: rgba(32, 121, 255, 1);
		}

		.ewm-pay {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 80px;
		}

		.ewm-pay img {
			width: 300px;
			height: 300px;
		}
	</style>
</head>

<body>
	<div id="index-app" v-cloak>
		<header-app></header-app>
		<div class="ind1-a1">
			<div class="btn-box">
				<div class="btn" @click="toPay('wx', 'wx-scancode')">微信扫码支付</div>
			</div>
			<div class="ewm-pay" v-if="payQrCode && !paySuccess"><img :src="payQrCode" alt="">
			</div>
			<div class="ewm-pay" v-if="paySuccess">支付成功</div>
		</div>
	</div>
	<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
	<script>
		Vue.createApp({
			setup() {
				let payQrCode = Vue.ref('')
				let paySuccess = Vue.ref(false)
				// 支付
				const toPay = (way, type) => {
					var api = 'wxpay'
					paySuccess.value = false
					createOrder().then(response => {
						console.log(response)
						// 获取支付二维码
						$.post("https://jzt2.china9.cn/api/pay/" + api, {
							type: type,  // 支付类型（微信扫码支付：wx-scancode）
							order_sn: response.order_sn,  //订单号  通过创建订单接口返回
							money: 0.01,  //支付金额
							order_desc: '开通会员'  // 订单介绍
						}, function (res) {
							console.log(res)
							if (res.code === 200) {
								// 支付二维码获取成功  回调支付状态 直到支付成功
								payQrCode.value = res.data
								// 支付状态回调
								orderStatus(response.order_sn)
							}
						})
					})
				}
				// 支付状态回调
				const orderStatus = (sn) => {
					payStatus(sn).then(info => {
						console.log(info, 'info')
						if (info && info.status == 1) {
							// 支付成功 改变支付状态
							return paySuccess.value = true
						}else {
							// 未支付 五秒查询一次状态
							setTimeout(function () {
								orderStatus(sn)
							}, 5000)
						}
					})
				}
				// 支付状态回调(订单支付状态查询) 接口
				const payStatus = (sn) => {
					return new Promise((resolve, reject) => {
						$.post("https://jzt2.china9.cn/api/SiteOrder/selInfo", {
							site_id: '6352679462e52a19f57c2d06',  //站点id
							order_sn: sn  //需要查询的订单编号
						}, function (res) {
							if (res.code === 200) {
								resolve(res.data)
							} else {
								alert(res.msg)
							}
						})
					})
				}
				// 创建订单
				const createOrder = () => {
					return new Promise((resolve, reject) => {
						$.post("https://jzt2.china9.cn/api/SiteOrder/addMsg", {
							site_id: '6352679462e52a19f57c2d06'  // 站点id
						}, function (res) {
							// console.log(res)
							if (res.code === 200) {
								resolve(res.data)
							} else {
								alert(res.msg)
							}
						})
					})
				}
				Vue.onBeforeMount(() => {
				})

				// DOM挂载完毕
				Vue.onMounted(() => {

				})
				// 定义的变量 如果页面需要使用必须return出去
				return { payQrCode, toPay, paySuccess }
			}
		}).component(
			// 注册的名字
			'HeaderApp',
			// 组件的实现
			headerApp
		).mount('#index-app')
	</script>
</body>

</html>